<template>
    <div>
        <bread-crumb></bread-crumb>
        <h1>后台分页的效果</h1>
        <el-table :data="tableData" style="width: 100%" border height="500px" @row-click="goDetail">
                <el-table-column prop="stu_id" label="学号" width="100">
                </el-table-column>
                <el-table-column prop="stu_name" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="stu_sex" label="性别" width="100">
                </el-table-column>
                <el-table-column prop="stu_date" label="出生日期" width="100">
                    <template slot-scope="scope">
                        <p>{{scope.$index}}</p>
                        <p>{{$moment(scope.row.stu_date).format('YYYY-MM-DD')}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="stu_head_img" label="头像">
                    <template slot-scope="scope">
                        <el-image 
                            style="width: 100px; height: 100px"
                            :src="scope.row.stu_head_img" 
                            :preview-src-list="srcList"
                            @click="bigImage(scope.row.stu_head_img)"
                            >
                        </el-image>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background 
            layout="prev, pager, next" 
            :total="total" 
            :page-size="pageSize" 
            :current-page="currentPage"
            @current-change="currentChange"
            >
            </el-pagination>
    </div>
</template>

<script>
import {req_code_stu_info} from '@/api/stuinfo.js';
    export default {
        mounted(){
            // let result=await req_code_stu_info(this.currentPage);
            // console.log(result.data);
            // //group_stuinfo  5条数据
            // // pages  一共有多少页
            // this.total=this.pageSize*result.data.pages;
            // this.tableData=result.data.group_stuinfo;
            this.getData(this.currentPage);
        },
        data() {
            return {
                tableData:[],
                srcList:[
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                ],
                total:0, //数据的总条数
                pageSize:3, //3条数据一页
                totalData:0,  //请求回来的全部数据
                currentPage:1  //当前页码
            }
        },
        methods:{
        async currentChange(value){
            this.getData(value);
        },
        async getData(value){
            console.log(value);
            let result=await req_code_stu_info(value);
            console.log(result.data);
            //group_stuinfo  5条数据
            // pages  一共有多少页
            this.total=this.pageSize*result.data.pages;
            this.tableData=result.data.group_stuinfo;
        },
        bigImage(value){
            console.log(value);
            this.srcList[2]=value;
        },
        goDetail(row,column,event){
            console.log(row,column,event);
            // 进行路由跳转是随便跳转的吗？不是，除了点击头像，其它都可以
            console.log(event.target.tagName);
            if(event.target.tagName != 'IMG'){
                this.$router.push({
                name:'StuDetail',
                query:{
                    StuInfoDetail:JSON.stringify(row),
                }
                })
            }
        }
        }
    }
</script>

<style lang="scss" scoped>
div{
    height: 30px;
}
</style>